﻿<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3">栅格系统 <kbd class="pull-right">Grid System</kbd></h1>
</div>
<div class="wrapper-md">
    <div class="row">
        <div class="col-lg-12">
            <p>基于 bootstrap 栅格系统，共有12列供你分配，比如: 12/3 = col-lg-4。 <br />
            值得一说的是，多了个<code>col-lg-2-4</code>: 12/5 = col-lg-2.4 <span class="text-muted">(把 '.' 替换成 '-')</span></p>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-12</div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-6</div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-6</div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-4</div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-4</div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-4</div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-3</div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-3</div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-3</div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-3</div>
            </div>
        </div>
        <div class="col-lg-2-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2-4</div>
            </div>
        </div>
        <div class="col-lg-2-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2-4</div>
            </div>
        </div>
        <div class="col-lg-2-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2-4</div>
            </div>
        </div>
        <div class="col-lg-2-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2-4</div>
            </div>
        </div>
        <div class="col-lg-2-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2-4</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-2</div>
            </div>
        </div>
        <div class="col-lg-12">
            <p>手机、平板电脑和桌面</p>
        </div>
        <div class="col-lg-4">
            <div class="row">
                <div class="col-xs-6">
                    <div class="panel panel-default">
                        <div class="panel-body">col-xs-6</div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="panel panel-default">
                        <div class="panel-body">col-xs-6</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-8</div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-body">col-sm-6</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-body">col-sm-6</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-6</div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">col-md-6</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">col-md-6</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-body">col-lg-4</div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-body">col-sm-6</div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-body">col-sm-6</div>
            </div>
        </div>
    </div>
</div>